<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/audit' }">补贴审核</el-breadcrumb-item>
      <el-breadcrumb-item>补贴详细信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-button  icon="el-icon-arrow-left" size="mini" @click="goListPage">返回</el-button>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- table 已选择指标文 -->
      <div style='font-size: 14pt; font-weight:800' >
        已选择指标文
      </div>

      <el-table :data='indicatorList'  :row-class-name="indexTextTableRowClassName" border  :header-cell-style="{background:'#eee',color:'#606266',fontSize: '14px'}">
        <el-table-column label="序号" type="index" width="50px" align="center"></el-table-column>
        <el-table-column label="指标文号" prop="zbwh" width="200px" align="center"></el-table-column>
        <el-table-column label="单位账号" prop="gjjzh" width="80px" align="center"></el-table-column>
        <el-table-column label="合计金额(元)" prop="hjje" width="180px" align="center"></el-table-column>
        <el-table-column label="已使用金额(元)" prop="hjybje" width="180px" align="center"></el-table-column>
        <el-table-column label="剩余金额(元)" prop="syje" width="180px" align="center"></el-table-column>
        <el-table-column label="资金来源" prop="zjly" align="center"></el-table-column>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleIndexTextError('标红',scope.row)">标记</el-button>
            <el-button type="primary" size="mini" @click="handleIndexTextError('正常',scope.row)">取消标记</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- table 职工信息 -->
      <div style='font-size: 14pt; margin-top:25px; font-weight:800' >
        职工信息
      </div>

      <el-table :data='workerList' :row-class-name="employeeTableRowClassName" border  :header-cell-style="{background:'#eee',color:'#606266',fontSize: '14px'}">
        <el-table-column label="序号" type="index" width="50px" align="center"></el-table-column>
        <el-table-column label="姓名" prop="name" width="100px" align="center"></el-table-column>
        <el-table-column label="身份证号" prop="idNumber" width="250px" align="center"></el-table-column>
        <el-table-column label="银行卡号" prop="cardNumber" width="250px" align="center"></el-table-column>
        <el-table-column label="补贴金额(元)" prop="amount" width="170px" align="center"></el-table-column>
        <el-table-column label="继承人信息" align="center" >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="getInheritorDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleWorkerError('标红',scope.row)">标记</el-button>
            <el-button type="primary" size="mini" @click="handleWorkerError('正常',scope.row)">取消标记</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- table 统计信息 -->
      <div style='font-size: 14pt; margin-top:25px; font-weight:800' >
        统计信息
      </div>

      <el-table :data='statisticsList' border stripe :header-cell-style="{background:'#eee',color:'#606266',fontSize: '14px'}">
        <el-table-column label="指标文总金额(元)" prop="zbwzje" align="center"></el-table-column>
        <el-table-column label="发放总金额(元)" prop="ffzje"  align="center"></el-table-column>
        <el-table-column label="涉及的职工人数(元)" prop="sjzgrs" align="center"></el-table-column>
      </el-table>


      <!--继承人信息弹窗-->
      <el-dialog
        title="继承人信息查看"
        :visible.sync="inheritorDialogVisible"
        width="70%"
      >
        <!-- 继承人弹窗内信息 -->
        <el-card>
          <!-- 弹窗内职工信息 -->
          <div style='font-size: 12pt'>
            职工信息
          </div>
          <el-row>
            <el-col :span="6">
              <div style='margin-top: 10px;margin-left:50px;font-size: 10pt'>职工姓名:
                <span>{{this.workerName}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div style='margin-top: 10px;font-size: 10pt'>职工身份证号:
                <span>{{this.workerIDCard}}</span>
              </div>
            </el-col>
          </el-row>


          <!-- 弹窗内继承人信息 -->
          <div style='font-size: 12pt; margin-top:25px' >
            继承人信息
          </div>

          <!-- 继承人表格区域 -->
          <el-table :data='inheritorList' border stripe :header-cell-style="{background:'#eee',color:'#606266',fontSize: '12px'}">
            <el-table-column label="序号 "type="index" width="70px" align="center"></el-table-column>
            <el-table-column label="继承人姓名" prop="name" width="90px" align="center"></el-table-column>
            <el-table-column label="身份证号" prop="idNumber" width="190px" align="center"></el-table-column>
            <el-table-column label="联系电话" prop="phoneNumber" width="170px" align="center"></el-table-column>
            <el-table-column label="银行卡号" prop="cardNumber;" width="190px" align="center"></el-table-column>
            <el-table-column label="操作" align="center" >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="getNotarization(scope.row.inheritorId)">查看公证材料</el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-card>

        <span
          slot="footer"
          class="dialog-footer"
        >
        <el-button  @click="closeInheritorDetail">确定</el-button>
      </span>
      </el-dialog>

      <!--公证信息弹窗-->
      <el-dialog class='el_img_dialog'
        title="公证材料"
        :visible.sync="notarizationDialogVisible"
        width="50%"
      >
       <template v-for="(item,index) in imageList" >
         <span style=" color: slategrey;font-size: 18px;font-weight: bold;">公证人材料{{index+1}}如下:</span>
         <img :src="item.src" style='width:100%;height: 100%'>
         <br>
       </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inheritorDialogVisible: false, // 继承人弹窗
      notarizationDialogVisible: false, // 公证信息弹窗
      allowanceId: '',
      gjjzh:'',
      imageList:[],//证明材料列表
      indicatorList: [], // 指标文列表
      employeeId:'',//员工id，点击查看继承人时赋值
      workerList:[],//职工列表
      statisticsList:[],//统计列表

      workerName:'',//弹窗内职工信息-名字
      workerState:'',//弹窗内职工信息-状态
      workerIDCard:'',//弹窗内职工信息-身份证号码
      inheritorList:[],//弹窗内继承人表格
      //弹窗内表格
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 3
      },
      // 总数据条数
      total: 0,//弹窗内总数据条数
      // 指标文状态列表
      indexTextStateList: [],
      // 职工状态列表
      employeeStateList: []
    }
  },
  created() {
    this.allowanceId = this.$route.query.id;
    this.gjjzh = this.$route.query.gjjzh;
    this.getAllLists()
  },
  methods: {
    //传补贴ID，获取三个列表
    async getAllLists( ) {
     this.$http.get('/allowance/getAllowanceDetail',{params:{
          allowanceId:this.allowanceId
        }},{ emulateJSON:true}).then( res => {
          let i
       const { data } = res
       console.log('---')
       console.log(data)
          if (data.code !== 200) {
            return this.$message.error('获取补贴详细信息失败！')
          }
          else{
            // 指标文和职工标红状态列表
            this.indexTextStateList = data.data.zbwhStateList
            this.employeeStateList = data.data.employeeStateList
            let indicatorOri=data.data.zbwhList
            let workerOri=data.data.employeeList
           //let statisticsOri=res.data.amountList
            let amountList=data.data.amountList
            //调指标文接口查信息
            if(indicatorOri.length!=0){
              for(i = 0; i<indicatorOri.length; i++){
                this.$http.get('zbwmx/findByZbwhAndGjjzh',{params:{
                    gjjzh: this.gjjzh,
                    zbwh: indicatorOri[i]
                  }},{ emulateJSON:true}).then(({ data:r1 }) => {
                  console.log('+++')
                  console.log(r1)
                  this.indicatorList.push({
                    czje: r1.data.czje,
                    czybje: r1.data.czybje,
                    fsje: r1.data.fsje,
                    fsybje: r1.data.fsybje,
                    gjjzh: r1.data.gjjzh,
                    hjje: r1.data.hjje,
                    hjybje: r1.data.hjybje,
                    tkje: r1.data.tkje,
                    ybje: r1.data.ybje,
                    zbwh:r1.data.zbwh,
                    zfje: r1.data.zfje,
                    zfybje: r1.data.zfybje,
                    zjly:r1.data.zjly,
                    zjyt:r1.data.zjyt,
                    syje:r1.data.hjje-r1.data.hjybje
                    }
                  )
                  this.getSatisticslist()
                })
              }
            }
            //调职工接口查信息
            if(workerOri.length!=0){
              for(let i = 0; i<workerOri.length; i++){
                const { data: res } = this.$http.get('/employee/findByIdAndGjjzh',{params:{
                    employeeId: workerOri[i],
                    gjjzh: this.gjjzh
                  }},{ emulateJSON:true}).then(({ data:r2 }) => {
                  this.workerList.push({
                    index: i,
                    employeeId: r2.data.employeeId,
                    name: r2.data.name,
                    idNumber:r2.data.idNumber,
                    amount: amountList[i],
                    cardNumber: r2.data.cardNumber
                  })
                  })

              }
            }
            /*this.indicatorList= res.data.zbwhList
            this.workerList=res.data.employeeList
            this.statisticsList=res.data.amountList*/
          }
      })
      },
    getSatisticslist(){
      let zbwzje = 0
      let ffzje = 0
      //console.log(this.indicatorList)
      this.indicatorList.forEach(item =>{
        zbwzje += item.hjje
        ffzje += item.hjybje
      })
      this.statisticsList=[],
      this.statisticsList.push({
        zbwzje: zbwzje,
        ffzje: ffzje,
        sjzgrs: this.workerList.length
      })
    },
    // 继承人信息列表
    getInheritorList() {
      const { data: res } = this.$http.get(`/inheritor/employeeId/${this.employeeId}`,{ emulateJSON:true}).then(res => {
        if (res.status !== 200) {
          return this.$message.error('获取继承人信息失败！')
        } else {
          //this.$message.success('获取商品列表成功！')
          //console.log(res.data)
          this.inheritorList=res.data.data
          this.total=res.data.total
        }
      })
    },

    //修改分页
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getInheritorList()
    },
    //选择页数
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getInheritorList()
    },

    //返回审核列表页面
    goListPage() {
      this.$router.push('/audit')
    },
    //点击查看打开继承人弹窗
    getInheritorDetail(row){
      this.inheritorDialogVisible= true
      this.queryInfo.pagenum=1
      this.queryInfo.pagesize=3
      //职工信息
      this.workerName=row.name
      this.workerIDCard=row.idNumber
      this.employeeId=row.employeeId

      //获取继承人列表
      this.getInheritorList()

    },
    //关闭查看打开继承人弹窗
    closeInheritorDetail(){
      this.inheritorDialogVisible= false
      this.workerName=' '
      this.workerIDCard=' '
      this.employeeId=' '
    },
    //打开查看公证材料弹窗
    getNotarization(id){
      this.notarizationDialogVisible= true
      this.$http.get(`inheritor/downloadFile/${this.employeeId}/${id}`,{
          emulateJSON:true}).then(res => {
        if (res.data.code !== 200) {
          this.$message.error('获取公证材料失败！')
        }
        else{
          console.log(res.data.data)
          this.imageList =res.data.data
          //console.log(this.notarizationSrc)
          this.imageList.forEach( item => {
            if (item.type === 'jpg' || item.type === 'jpeg') {
              item.src = `data:image/jpeg;base64,${item.file}`
            } else {
              item.src = `data:image/png;base64,${item.file}`
            }
          })
        }
      })
    },
    // 将指标文信息标红或者取消标红
   async handleIndexTextError(state, row) {
     if ( state === '标红') {
       this.$prompt( '请输入错误原因：', '错误提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消'
       }).then(async ({ value: remark }) => {
         // 确认操作
         console.log(remark)
         console.log(state,row)
         const { data: res } =  await this.$http.get('/audit/markRedZbwmx', {params:{
             allowanceId: this.allowanceId,
             state: state,
             remark,
             zbwh: row.zbwh}
         })
         console.log(res)
         if (res.code !== 200) return this.$message.error('操作失败')
         this.$message.success('操作成功')
         this.workerList = []
         this.indicatorList = []
         this.getAllLists()
       }).catch(() => {
         // 取消操作
         this.$message({
           type: 'info',
           message: '取消本次标记操作'
         })
       })
     } else {
       const { data: res } =  await this.$http.get('/audit/markRedZbwmx', {params:{
           allowanceId: this.allowanceId,
           state: state,
           zbwh: row.zbwh}
       })
       console.log(res)
       if (res.code !== 200) return this.$message.error('操作失败')
       this.$message.success('操作成功')
       this.workerList = []
       this.indicatorList = []
       this.getAllLists()
     }

    },
    // 将职工补贴信息标红或者取消标红
    async handleWorkerError(state, row) {
     if (state === '标红') {
       this.$prompt('请输入错误原因', '错误提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
       }).then(async({ value: remark }) => {
         // 确认操作
         console.log(state,row)
         const { data: res } = await this.$http.get('/audit/markRedEmployee', {params:{
             allowanceId: this.allowanceId,
             state: state,
             remark,
             employeeId : row.employeeId }
         })
         console.log(res)
         if (res.code !== 200) return this.$message.error('操作失败')
         this.$message.success('操作成功')
         this.workerList = []
         this.indicatorList = []
         this.getAllLists()
       }).catch(() => {
         // 取消操作
         this.$message({
           type: 'info',
           message: '已取消本次标记'
         })
       })
     } else {
       console.log(state,row)
       const { data: res } = await this.$http.get('/audit/markRedEmployee', {params:{
           allowanceId: this.allowanceId,
           state: state,
           employeeId : row.employeeId }
       })
       console.log(res)
       if (res.code !== 200) return this.$message.error('操作失败')
       this.$message.success('操作成功')
       this.workerList = []
       this.indicatorList = []
       this.getAllLists()
     }

    },
    //控制指标文表格变色
    indexTextTableRowClassName({row, rowIndex}) {
      for (let i = 0; i < this.indexTextStateList.length; i++) {
        if( row.zbwh === this.indexTextStateList[i].zbwh && this.indexTextStateList[i].state === '标红') {
          console.log('设置成功')
          return 'warning-row'
        }
      }
      return ''
    },
    // 控制职工表格变色
    employeeTableRowClassName({row, rowIndex}) {
     for (let i = 0; i < this.employeeStateList.length; i++) {
       if( row.employeeId === this.employeeStateList[i].employeeId && this.employeeStateList[i].state === '标红') {
         console.log('设置成功')
         return 'warning-row'
       }
     }
      return ''
    },
    // 标记备注弹窗
    showErrorDialog() {
      this.errorDialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog__body {
  padding-top: 0!important;
}

/deep/ .el-table .warning-row {
  background: #FF6600;
}
</style>
